<template>
	<view class="page">
		<view class="top">
			<view class="box">
				<view class="info">
					<view class="date" v-if="!show">
						<text>{{cfDate}}</text>
						<text>{{cfWeek}}出发</text>
					</view>
					<view class="date date_ship" v-else>
						<text>{{cfDate}}</text>
						<text>{{cfWeek}}</text>
						<text>{{item.startPortName}} - {{item.endPortName}}</text>
						<text v-if="isCarShip">车船联票</text>
					</view>
					<view class="time_addr" v-if="!isCarShip">
						<view class="ta_time">
							<text>{{item.sailTime}}</text>
							<text>{{item.clxm}}</text>
						</view>
						<view class="ta_addr">
							<image src="@/static/index/steamerTicket/icon_line2.png" mode=""></image>
							<view>
								<text>{{item.startPortName}}</text>
								<text>{{item.endPortName}}</text>
							</view>
						</view>
					</view>
					<view class="time_addr ta_car_ship" v-else>
						<view class="ta_time">
							<text>{{item.busStartTime}} 开车</text>
							<text>{{item.sailTime}} 开船</text>
							<text style="color: transparent;">d</text>
						</view>
						<view class="ta_addr">
							<image src="https://i.ringzle.com/file/20240325/b68b2d2aa04f4c50b70ebe13341f25ec.png" mode=""></image>
							<view>
								<text>{{item.startPortName||''}}</text>
								<text>{{item.embarkPortName||''}}</text>
								<text>{{item.endPortName||''}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="tb_bottom" @tap="toInstructions">
					<view>
						<image src="https://i.ringzle.com/file/20240220/51374f7aa1ae44ca9fc0703f395a6118.png">
						</image>
						<text>取退改票说明</text>
					</view>
					<image src="@/static/index/steamerTicket/icon_yjt.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="ship_spaces" v-if="!shipShow">
			<view class="box">
				<view v-for="(pre,index) in item.seatClasses" :key="index"
					:class="(hasLocal?(pre.localCurrentCount===0&&pre.pubCurrentCount===0):(pre.pubCurrentCount===0))?'active':''">
					<view class="sb_left">
						<image :src="cic.cabinImg[pre.className]||cic.defaultImg"></image>
						<view class="sbl_info">
							<view class="cbli_title">{{pre.className}}</view>
							<view class="cbli_item" :style="{'margin-top':(hasLocal?20:55)+'rpx'}">公共舱：余票
								{{pre.pubCurrentCount}} 张
							</view>
							<view class="cbli_item" v-if="hasLocal">本地舱：余票 {{pre.localCurrentCount}} 张</view>
						</view>
					</view>
					<view class="sb_right">
						<view class="sbr_price">
							<text>￥</text>
							<text class="sbrp_p">{{hasLocal?pre.localPrice:pre.totalPrice}}</text>
							<text>起</text>
						</view>
						<view class="sbr_yd" @tap="toReserve(pre)">预订</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ship_spaces ship_spaces_car" v-else>
			<text>车辆及随车人员</text>
			<view class="box">
				<view v-for="(pre,index) in item.driverSeatClass" :key="index"
					:class="(hasLocal?(pre.localCurrentCount===0&&pre.pubCurrentCount===0):(pre.pubCurrentCount===0))?'active':''">
					<view class="sb_left">
						<image :src="cic.cabinImg['中舱']"></image>
						<view class="sbl_info">
							<view class="cbli_title">{{pre.className}}</view>
							<view class="cbli_item" :style="{'margin-top':(hasLocal?20:55)+'rpx'}">公共舱：余票
								{{pre.pubCurrentCount}} 张
							</view>
							<view class="cbli_item" v-if="hasLocal">本地舱：余票 {{pre.localCurrentCount}} 张</view>
						</view>
					</view>
					<view class="sb_right">
						<view class="sbr_price">
							<text>￥</text>
							<text class="sbrp_p">{{hasLocal?pre.localPrice:pre.totalPrice}}</text>
							<!-- <text>起</text> -->
						</view>
						<!-- <view class="sbr_yd" :class="pre.selected?'active':''" @tap="(!hasLocal?(pre.pubCurrentCount!=0):(pre.pubCurrentCount!=0||pre.localCurrentCount!=0))?toSelectCar(pre,index):''">{{pre.selected?'已选':'预订'}}</view> -->
						<view class="sbr_yd" @tap="toOrder(pre)">预订</view>
					</view>
				</view>
			</view>
			<!-- <text class="mt49">同乘人可选舱位</text>
		<view class="box">
			<view v-for="(pre,index) in item.seatClasses" :key="index" :class="(hasLocal?(pre.localCurrentCount===0&&pre.pubCurrentCount===0):(pre.pubCurrentCount===0))?'active':''">
				<view class="sb_left">
					<image :src="cic.cabinImg[pre.className]||cic.defaultImg"></image>
					<view class="sbl_info">
						<view class="cbli_title">{{pre.className}}</view>
						<view class="cbli_item" :style="{'margin-top':(hasLocal?20:55)+'rpx'}">公共舱：余票 {{pre.pubCurrentCount}} 张</view>
						<view class="cbli_item" v-if="hasLocal">本地舱：余票 {{pre.localCurrentCount}} 张</view>
					</view>
				</view>
				<view class="sb_right">
					<view class="sbr_price">
						<text>￥</text>
						<text class="sbrp_p">{{hasLocal?pre.localPrice:pre.totalPrice}}</text>
						<text>起</text>
					</view>
					<view class="sbr_yd" :class="pre.selected?'active':''" @tap="(!hasLocal?pre.pubCurrentCount!=0:(pre.pubCurrentCount!=0||pre.localCurrentCount!=0))?toSelected(pre,index):''">{{pre.selected?'已选':'预订'}}</view>
				</view>
			</view>
		</view> -->
		</view>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</view>
</template>

<script>
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	export default {
		components: {
			GetPhoneNumber
		},
		data() {
			return {
				item: '',
				show: false,
				shipShow: false,
				selectList: [],
				price: 0,
				detailsShow: false,
				cfDate: '',
				cfWeek: '',
				weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				adultPrice: 0,
				carPrice: 0,
				hasLocal: false, //是否包含本地人
				cic: this.$cic,
				title: '',
				isCarShip: false
			}
		},
		methods: {
			init(item){
				this.item = item;
				this.title = this.item.startPortName + ' - ' + this.item.endPortName;
				if (this.item.startPortName.indexOf('上海') > -1) this.isCarShip = true;
				for (let i = 0; i < this.item.seatClasses.length; i++) {
					this.$set(this.item.seatClasses[i], 'selected', false);
				}
				this.item.driverSeatClass && this.item.driverSeatClass.forEach((d, i) => {
					this.$set(this.item.driverSeatClass[i], 'selected', false)
				})
				this.cfDate = new Date(this.item.sailDate).Format('MM月dd日');
				this.cfWeek = this.weeks[new Date(this.item.sailDate).getDay()];
				this.getIsLocal();
			},
			toReserve(item) {
				if (!this.hasLocal && !item.pubCurrentCount) return
				if (this.hasLocal && !item.localCurrentCount && !item.pubCurrentCount) return
			
				this.$login().then(res => {
					if (res === 0) {
						this.item.cangInfo = item;
						this.$emit('toPassengerPay',this.item);
					} else this.$refs['phoneNumber'].show = true;
				})
			},
			getIsLocal() {
				if (!uni.getStorageSync('userInfo')) return
				this.$api.get('/api/commonPerson/isLocalCount', {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
					isLocal: 1
				}).then(res => {
					if (res.data.code === 0) {
						this.hasLocal = res.data.data > 0 ? true : false;
					} else this.$showModal(res.data.msg);
				})
			},
			loginSuccess() {
				this.getIsLocal();
			},
			toSelectCar(item, index) {
				item.type = 1;
				if (!this.item.driverSeatClass) return
				this.$set(this.item.driverSeatClass[index], 'selected', !this.item.driverSeatClass[index].selected);
				if (this.item.driverSeatClass[index].selected) this.selectList.push(item)
				else {
					let idx = this.selectList.findIndex(d => d.className == item.className);
					if (idx >= 0) this.selectList.splice(idx, 1)
				}
				this.dealPrice();
			},
			toSelected(item, index) {
				item.type = 2;
				if (!this.item.seatClasses) return
				this.$set(this.item.seatClasses[index], 'selected', !this.item.seatClasses[index].selected);
				if (this.item.seatClasses[index].selected) this.selectList.push(item)
				else {
					let idx = this.selectList.findIndex(d => d.className == item.className);
					if (idx >= 0) this.selectList.splice(idx, 1)
				}
				this.dealPrice();
			},
			//计算价格
			dealPrice() {
				this.price = this.selectList.reduce((cur, pre) => cur + pre.totalPrice, 0);
				if (this.selectList.find(d => d.type == 1)) this.carPrice = this.selectList.find(d => d.type == 1)
					.totalPrice;
				else this.carPrice = 0;
				if (this.selectList.find(d => d.type == 2)) this.adultPrice = this.selectList.find(d => d.type == 2)
					.totalPrice;
				else this.adultPrice = 0;
			},
			//去支付(跳转)
			toPay() {
				this.item.carInfo = this.selectList.find(d => d.type == 1);
				this.item.cangInfo = this.selectList.find(d => d.type == 2) || this.item.seatClasses[0];
				if (!this.item.carInfo) return this.$showToast('请选择车辆');
				uni.navigateTo({
					url: '/pagesIndex/steamerTicket/passengerPay?item=' + JSON.stringify(this.item)
				})
			},
			//取退改票说明
			toInstructions() {
				uni.navigateTo({
					url: '/pagesIndex/steamerTicket/ticketingInstructions?title=取票、退票、改签说明'
				})
			},
			toOrder(item) {
				this.$login().then(res => {
					if (res === 0) {
						this.item.carInfo = item;
						if(this.item.seatClasses.length){
							this.item.cangInfo = this.item.seatClasses.find(s=>s.className=='上舱') || this.item.seatClasses[0];
						}else{
							this.item.cangInfo = {
								className:'',
								totalPrice:0,
								halfPrice:0,
								localPrice:0,
								localHalfPrice:0,
								pubCurrentCount:0,
								isNoCang:true
							}	
						}
						uni.navigateTo({
							url: '/pagesIndex/steamerTicket/passengerPayCar?item=' + JSON.stringify(this
								.item)
						})
					} else this.$refs['phoneNumber'].show = true;
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		position: relative;
		.top {
			.box {
				width: 100%;
				background: #FFFFFF;
				border-radius: 16rpx;
		
				.info {
					// background: linear-gradient(to right, #3092E0, #45B7DE);
					background-color: #007A69;
					border-radius: 16rpx;
					padding: 40rpx 24rpx;
		
					.date {
						display: flex;
		
						text {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
		
							&:last-child {
								margin-left: 15rpx;
							}
						}
		
						&.date_ship {
							text {
								&:nth-child(2) {
									margin-left: 15rpx;
								}
		
								&:nth-child(3) {
									margin-left: 23rpx;
								}
							}
						}
					}
		
					.time_addr {
						padding: 30rpx 0 0 96rpx;
						display: flex;
						align-items: center;
		
						.ta_time {
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-top: -12rpx;
		
							text {
								&:first-child {
									font-size: 40rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									color: #FFFFFF;
								}
		
								&:last-child {
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #FFFFFF;
									margin-top: 30rpx;
								}
							}
						}
		
						.ta_addr {
							display: flex;
							align-items: center;
							padding-left: 40rpx;
		
							image {
								width: 8rpx;
								height: 68rpx;
							}
		
							&>view {
								padding-left: 20rpx;
								display: flex;
								flex-direction: column;
		
								text {
									font-size: 30rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									color: #FFFFFF;
		
									&:last-child {
										margin-top: 29rpx;
									}
								}
							}
						}
						
						&.ta_car_ship{
							padding: 30rpx 0 0 80rpx;
							.ta_time{
								margin-top: 0;
								text{
									font-family: PingFang-SC, PingFang-SC;
									font-weight: bold;
									font-size: 30rpx;
									color: #FFFFFF;
									margin-top: 28rpx;
									&:first-child{
										margin-top: 0;
									}
								}
							}
							.ta_addr{
								padding-left: 20rpx;
								image{
									width: 8rpx;
									height: 128rpx;
								}
								&>view{
									margin-top:0;
									text{
										margin-top: 28rpx;
										&:first-child{
											margin-top: 0;
										}
									}
								}
							}
						}
					}
				}
		
				.tb_bottom {
					padding: 27rpx 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
		
					&>view {
						display: flex;
						align-items: center;
		
						image {
							width: 26rpx;
							height: 26rpx;
						}
		
						text {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #007A69;
							margin-left: 10rpx;
						}
					}
		
					&>image {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
		}
		
		.ship_spaces {
			&>text {
				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #111111;
			}
		
			.box {
				padding: 16rpx 0;
		
				&>view {
					width: 100%;
					margin-top: 20rpx;
					padding: 20rpx 24rpx 20rpx 20rpx;
					box-sizing: border-box;
					border-radius: 12rpx;
					background: #fff;
					display: flex;
					align-items: center;
					justify-content: space-between;
		
					.sb_left {
						display: flex;
		
						image {
							width: 156rpx;
							height: 156rpx;
						}
		
						.sbl_info {
							padding-left: 24rpx;
		
							.cbli_title {
								font-size: 32rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #111111;
								margin-top: 12rpx;
							}
		
							.cbli_item {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
								margin-top: 14rpx;
							}
						}
					}
		
					.sb_right {
						display: flex;
						flex-direction: column;
						align-items: flex-end;
		
						.sbr_price {
							display: flex;
							align-items: flex-end;
		
							text {
								display: flex;
								align-items: center;
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #FE401A;
		
								&.sbrp_p {
									font-size: 44rpx;
									font-family: Arial-BoldMT, Arial;
									font-weight: BoldMT;
									color: #FE401A;
									line-height: 38rpx;
								}
							}
						}
		
						.sbr_yd {
							width: 108rpx;
							height: 56rpx;
							background: #007A69;
							border-radius: 10rpx;
							line-height: 56rpx;
							text-align: center;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: Regular;
							color: #FFFFFF;
							margin-top: 24rpx;
		
							&.active {
								background:#007A69;
		
							}
						}
					}
		
					&.active {
						text {
							color: #AAAAAA !important;
						}
		
						.sbr_yd {
							background: #CCCCCC;
						}
					}
				}
			}
		
			&.ship_spaces_car {
				&>text {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
		
				.mt49 {
					margin-top: 49rpx;
				}
		
				.sb_left {
					text {
						font-size: 32rpx !important;
						font-family: PingFang-SC-Bold, PingFang-SC !important;
						font-weight: bold !important;
						color: #111111 !important;
						margin-top: 0 !important;
					}
				}
			}
		}
	}
</style>